//定义一个LazyLoad的对象
const LazyLoad = {

    //定义插件安装的install的方法
    install(Vue){
        //定义默认的图片路径
        let defaultSrc = "/logo.png";

        //定义全局自定义指令
        Vue.directive("lazy",{
            bind(el,binding){
                LazyLoad.init(el,binding.value,defaultSrc)
            },
            inserted(el){
                //监听页面滚动的方法事件
                LazyLoad.listenScroll(el);
            }
        })
    },
    //定义一个初始化图片的方法
    init(el,val,drc){
        //设置img标签src属性和data-src属性
        el.setAttribute("src",drc);
        //设置真实路径的图片地址
        el.setAttribute("data-src",val);
    },

    //定义一个监听页面滚动的方法
    listenScroll(el){
        LazyLoad.loadImg(el);

        //滚动加载可以封装 节流的逻辑，提高渲染效率。
        window.addEventListener("scroll",()=>LazyLoad.loadImg(el));
    },

    //实现图片懒加载的方法
    loadImg(el){

        // getBoundingClientRect属性， top,left,bottom,right;
        //定义当前页面窗口的对象
        let html = document.documentElement || document.body;
        let clientH = html.clientHeight || 0;
        let offsetT = el.offsetTop;
        let scrollT = html.scrollTop;

        //判断图片是否进入可视化区域
        if(offsetT <= clientH+scrollT){
            setTimeout(()=>{
                el.src = el.getAttribute("data-src");
            },500);
        }


    },
}

//抛出这个对象的内容
export default LazyLoad;